const path = require('path')

const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        clean: true,
    },
    mode: 'production',
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "test.html",
            inject: true
        }),
        new MiniCssExtractPlugin({
            // 制定生成的文件名
            filename: 'styles/[contenthash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css|.less$/,
                // 生成style样式
                // use: ["style-loader", "css-loader", 'less-loader']
                // 生成css文件
                use: [MiniCssExtractPlugin.loader, "css-loader", 'less-loader']
            },
            // 资源模块
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(csv|tsv)$/,
                use: "csv-loader"
            },
            {
                test: /\.(xml)$/,
                use: "xml-loader"
            },
            {
                test: /\.toml$/,
                type: 'json',
                parser: {
                    parse:toml.parse
                }
            },
            {
                test: /\.yaml$/,
                type: 'json',
                parser: {
                    parse:yaml.parse
                }
            },
            {
                test: /\.json5$/,
                type: 'json',
                parser: {
                    parse:json5.parse
                }
            }
            
        ]
    },
    devServer: {
        static: "./dist",
        open: true,
        host: 'local-ip',
        onListening(s) {
            let { address: ads, port } = s.server.address()
            console.log('http:' + ads + ':' + port);
        }
    },
    devtool: 'inline-source-map',
    // 优化
    optimization: {
        minimizer: [
            new CssMinimizerPlugin()
        ]
    }
}

// 加载数据
// json csv tsv xml

// 自定义的json模块parser